<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="用户名">
      <el-input v-model="formInline.username" placeholder="用户名"></el-input>
    </el-form-item>
    <el-form-item label="电话">
      <el-input v-model="formInline.phone" placeholder="电话"></el-input>
    </el-form-item>
    <el-form-item label="状态" >
      <el-select v-model="formInline.state" placeholder="状态"  label-width="20px">
        <el-option label="正常" value="1"></el-option>
        <el-option label="禁用" value="0"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onAdd">添加</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="id" label="员工编号" />
    <el-table-column prop="username" label="员工姓名" />
    <el-table-column prop="email" label="员工邮箱" />
    <el-table-column prop="phone" label="员工电话" />
    <el-table-column prop="salt" label="加盐" />
    <el-table-column prop="password" label="员工密码" />
    <el-table-column prop="age" label="员工年龄" />
    <el-table-column prop="state" label="员工状态">
      <template #default="scope">
        <span v-if="scope.row.state===1" style="color: blue">正常</span>
        <span v-if="scope.row.state===0" style="color: red">禁用</span>
      </template>
    </el-table-column>
    <el-table-column prop="department.name" label="部门名称" />
    <el-table-column prop="logininfo.username" label="登录姓名" />
    <el-table-column prop="shop.name" label="商店名称" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
        >编辑</el-button
        >
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="demo-pagination-block">
    <el-pagination
        v-model:currentPage="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[5,10,20,50]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
  <el-form-item>
    <el-button type="primary" @click="onDelete">批量删除</el-button>
  </el-form-item>
  <el-dialog v-model="dialogFormVisible" title="添加和编辑员工">
    <el-form :model="form">
      <input type="hidden" v-model="form.id">
      <el-form-item label="员工姓名" :label-width="formLabelWidth">
        <el-input v-model="form.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="员工邮箱" :label-width="formLabelWidth">
        <el-input v-model="form.email" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="员工电话" :label-width="formLabelWidth">
        <el-input v-model="form.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="加盐" :label-width="formLabelWidth">
        <el-input v-model="form.salt" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="员工密码" :label-width="formLabelWidth">
        <el-input v-model="form.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="员工年龄" :label-width="formLabelWidth">
        <el-input v-model="form.age" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="员工状态" :label-width="formLabelWidth">
        <el-switch
            v-model="form.state"
            class="ml-2"
            active-color="#13ce66"
            inactive-color="#ff4949"
        />
      </el-form-item>
      <el-form-item label="部门名称" :label-width="formLabelWidth">
        <el-select v-model="form.department" placeholder="部门名称"  label-width="20px">
          <el-option
              v-for="item in deptName"
              :key="item"
              :label="item"
              :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="员工姓名" :label-width="formLabelWidth">
        <el-select v-model="form.logininfo" placeholder="员工姓名"  label-width="20px">
          <el-option
              v-for="item in options2"
              :key="item.username"
              :label="item.username"
              :value="item.username"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商店名称" :label-width="formLabelWidth">
        <el-select v-model="form.shop" placeholder="商店名称"  label-width="20px">
          <el-option
              v-for="item in options3"
              :key="item.name"
              :label="item.name"
              :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogSave"
        >保存</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script>
// location.reload()
import {onMounted,ref,reactive} from "vue";
import {loadAll, update, deleted, add, deleteAll} from "@/api/emp";
import Index from "_c/Dialog";
import { ElMessageBox, ElMessage} from 'element-plus'
import {selAllDept, selAllLoginInfo, selAllShop} from "@/api/emp";

export default {
  // components: {Index},
  setup() {
    const deptName = ref([])
    const logInfoName = ref([])
    const ShopName = ref([])
    const dept = reactive({id:''})
    const shop = reactive({id:''})
    const logInfo = reactive({id:''})
    const options1 = ref([])
    const options2 = ref([])
    const options3 = ref([])
    const list = ref([])
    const handleSelectionChange = (val) => {
      for (let i = 0; i < val.length; i++) {
        list.value[i] = val[i].id
      }
    }
    const onDelete = () => {
      console.log(list.value)
      deleteAll(list.value).then(res=>{
        if(res.success){
            loadAll({
              "currentPage":currentPage4.value,
              "pageSize":pageSize4.value,
            }).then(
                res=>{
                  tableData.value = res.data.list
                  total.value = res.data.total
                }
            )
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
        }else {
          ElMessage({
            type: 'error',
            message: '删除失败',
          })
        }
      })
    }
    const onAdd = () => {
      selAllDept().then(res=>{
        options1.value = res.data
        for (let i = 0; i < options1.value.length; i++) {
          deptName.value[i] = options1.value[i].name
        }
        Array.from(new Set(deptName.value))
        deptName.value = Array.from(new Set(deptName.value))
      })
      selAllLoginInfo().then(res=>{
        options2.value = res.data
        for (let i = 0; i < options2.value.length; i++) {
          logInfoName.value[i] = options2.value[i].username
        }
        Array.from(new Set(logInfoName.value))
        logInfoName.value = Array.from(new Set(logInfoName.value))
      })
      selAllShop().then(res=>{
        options3.value = res.data
        for (let i = 0; i < options3.value.length; i++) {
          ShopName.value[i] = options3.value[i].name
        }
        Array.from(new Set(ShopName.value))
        ShopName.value = Array.from(new Set(ShopName.value))
      })
      form.id = null
      form.username = null
      form.phone = null
      form.age = 0;
      form.state = false;
      form.department = null
      form.email = null
      form.logininfo = null
      form.password = null
      form.salt = null
      form.shop = null
      dialogFormVisible.value = true
    }
    const formInline = reactive({
      username: '',
      phone: '',
      state:''
    })
    const onSubmit = () => {
      loadAll({
        "currentPage":currentPage4.value,
        "pageSize":pageSize4.value,
        'username':formInline.username,
        'phone':formInline.phone,
        'state':formInline.state
      }).then(res=>{
        tableData.value = res.data.list
        total.value = res.data.total
      })
    }
    const dialogSave = () => {
      dialogFormVisible.value = false
      for (let i = 0; i < options1.value.length; i++) {
        if(options1.value[i].name === form.department){
          dept.id = options1.value[i].id
        }
      }
      for (let i = 0; i < options2.value.length; i++) {
        if(options2.value[i].username === form.logininfo){
          logInfo.id = options2.value[i].id
        }
      }
      for (let i = 0; i < options3.value.length; i++) {
        if(options3.value[i].name === form.shop){
          shop.id = options3.value[i].id
        }
      }
      if(form.id!=null){
        update({
          'id':form.id,
          'username':form.username,
          'email':form.email,
          'phone':form.phone,
          'salt':form.salt,
          'password':form.password,
          'age':form.age,
          'state':form.state?0:1,
          'department':dept,
          'logininfo':logInfo,
          'shop':shop
        }).then(res=>{
          console.log(res.success)
          if(res.success){
            for (let i = 0; i < tableData.value.length; i++) {
              console.log(form.department)
              if(tableData.value[i].id === form.id){
                tableData.value[i].username = form.username
                tableData.value[i].phone = form.phone
                tableData.value[i].age = form.age
                tableData.value[i].state = form.state?1:0
                tableData.value[i].department = form.department
                tableData.value[i].email = form.email;
                tableData.value[i].logininfo = form.logininfo
                tableData.value[i].password = form.password
                tableData.value[i].salt = form.salt
                tableData.value[i].shop = form.shop
              }
            }
            dept.id = null
            logInfo.id = null
            shop.id = null
            ElMessage({
              type: 'success',
              message: '修改成功',
            })
          }else{
            ElMessage({
              type: 'error',
              message: '修改失败',
            })
          }
        })
      }else {
        add({
          'username':form.username,
          'email':form.email,
          'phone':form.phone,
          'salt':form.salt,
          'password':form.password,
          'age':form.age,
          'state':form.state?0:1,
          'department':dept,
          'logininfo':logInfo,
          'shop':shop
        }).then(res=>{
          if(res.success){
            loadAll({
              "currentPage":currentPage4.value,
              "pageSize":pageSize4.value,
              'username':formInline.username,
              'phone':formInline.phone,
              'state':formInline.state
            }).then(res=>{
              tableData.value = res.data.list
              total.value = res.data.total
              dept.id = null
              logInfo.id = null
              shop.id = null
            })
            ElMessage({
              type: 'success',
              message: '添加成功',
            })
          }else {
            ElMessage({
              type: 'error',
              message: '添加失败',
            })
          }
        })
      }

    }
    const total = ref(5)
    const dialogFormVisible = ref(false)
    const formLabelWidth = '140px'
    const form = reactive({
      id:'',
      username:'',
      email:'',
      phone:'',
      salt:'',
      password:'',
      age:'',
      state:false,
      department:'',
      logininfo:'',
      shop:''
    })
    const tableData = ref('')
    const currentPage4 = ref(1)
    const pageSize4 = ref(5)
    const small = ref(false)
    const background = ref(false)
    const disabled = ref(false)
    const handleEdit = (index, row) => {
      selAllDept().then(res=>{
        options1.value = res.data
        for (let i = 0; i < options1.value.length; i++) {
          deptName.value[i] = options1.value[i].name
        }
        Array.from(new Set(deptName.value))
        deptName.value = Array.from(new Set(deptName.value))
      })
      selAllLoginInfo().then(res=>{
        options2.value = res.data
        for (let i = 0; i < options2.value.length; i++) {
          logInfoName.value[i] = options2.value[i].username
        }
        Array.from(new Set(logInfoName.value))
        logInfoName.value = Array.from(new Set(logInfoName.value))
      })
      selAllShop().then(res=>{
        options3.value = res.data
        for (let i = 0; i < options3.value.length; i++) {
          ShopName.value[i] = options3.value[i].name
        }
        Array.from(new Set(ShopName.value))
        ShopName.value = Array.from(new Set(ShopName.value))
      })
      form.id = row.id
      form.username = row.username
      form.phone = row.phone
      form.age = row.age
      form.state = row.state?true:false
      if(row.department!=null){
        form.department = row.department.name
      }
      form.email = row.email
      if(row.logininfo!=null){
        form.logininfo = row.logininfo.username
      }
      form.password = row.password
      form.salt = row.salt
      if(row.shop!=null){
        form.shop = row.shop.name
      }
      dialogFormVisible.value = true
    }
    const handleDelete = (index, row) => {
      open(index,row)
    }
    const handleSizeChange = (val) => {
      loadAll({
        "currentPage":currentPage4.value,
        "pageSize":val,
        'username':formInline.username,
        'phone':formInline.phone,
        'state':formInline.state
      }).then(res=>{
        tableData.value = res.data.list
        total.value = res.data.total
      })
    }
    const handleCurrentChange = (val) => {
      console.log(val)
      loadAll({
        "currentPage":val,
        "pageSize":pageSize4.value,
        'username':formInline.username,
        'phone':formInline.phone,
        'state':formInline.state
      }).then(res=>{
        tableData.value = res.data.list
        total.value = res.data.total
      })
    }
    const open = (index,row) => {
      ElMessageBox.confirm(
          '您确定要删除此条数据吗',
          'Warning',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        deleted(row.id).then(res=>{
          if(res.success){
            loadAll({
              "currentPage":currentPage4.value,
              "pageSize":pageSize4.value,
            }).then(
                res=>{
                  tableData.value = res.data.list
                  total.value = res.data.total
                }
            )
            ElMessage({
              type: 'success',
              message: '删除成功',
            })
          }else {
            ElMessage({
              type: 'error',
              message: '删除失败',
            })
          }
        })
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消删除',
            })
          })
    }
    onMounted(()=>{
      loadAll(
          {
              "currentPage":currentPage4.value,
              "pageSize":pageSize4.value,
          }
      ).then(res=>{
        console.log(Object.keys(res.data.list[0]))
        console.log(res.data.list)
        tableData.value = res.data.list
        total.value = res.data.total
      })
    })
    return{
      tableData,
      handleEdit,
      handleDelete,
      currentPage4,
      pageSize4,
      small,
      background,
      disabled,
      handleCurrentChange,
      handleSizeChange,
      form,
      dialogFormVisible,
      formLabelWidth,
      total,
      dialogSave,
      formInline,
      onSubmit,
      onAdd,
      handleSelectionChange,
      onDelete,
      list,
      options1,
      options2,
      options3,
      dept,
      shop,
      logInfo,
      deptName,
      logInfoName,
      ShopName
    }
  }
}
</script>

<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block{
  margin-top: 10px;
  margin-bottom: 16px;
  width: 100%;
  text-align: center;
}
</style>
